<template>
  <Layout>
    <div style="min-height: 600px">
      <el-card shadow="never" style="min-height: 400px;" v-if="news.length">
        <div v-for="item in news" :key="item.node.id">
          <div style="font-size: 0.9rem; line-height: 1.5; color: #606c71">
            发表时间 {{ item.node.updatedAt }}
          </div>
          <div
            v-html="item.node.content"
            class="markdown-body"
            style="padding-top: 20px;"
          />
        </div>
      </el-card>
      <el-card
        shadow="never"
        style="margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center"
        v-else
      >
        <font style="font-size: 30px;color:#dddddd ">
          <b>没有更新 ╮(๑•́ ₃•̀๑)╭</b>
        </font>
      </el-card>
    </div>
  </Layout>
</template>
<page-query>
query($page: Int) {
  allStrapiNew(perPage: 10, page: $page) @paginate {
    edges {
      node {
        id
        content
        updatedAt
      }
    }
  }
}
</page-query>
<script>
export default {
  name: "IndexPage",
  metaInfo: {
    title: "最新动态",
  },
  data() {
    return {
      query: {
        page: 1,
        pageSize: 1,
      },
    };
  },
  computed: {
    news() {
      return this.$page.allStrapiNew.edges;
    },
  },
};
</script>
